<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/home/service.css" />
</head>

<body>

	<div id="app" class="content">
		<div class="header-title">便民服务</div>

		<div class="list">
			<div class="item" v-for="item in list" @click="externalclick(item)">
				<img class="icon" :src="item.icon">
				<span class="font-16 font-c-14" v-text="item.title"></span>
				<span class="font-12 font-c-ad" v-text="item.desc"></span>

			</div>
			<div class="item" @click="maintainClick">
				<img class="icon" src="../../../images/home/service/wei.png">
				<span class="font-16 font-c-14">有偿维修</span>
				<span class="font-12 font-c-ad">清洗服务 | 家电维修</span>
			</div>
		</div>

	</div>


	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function(){
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
		})
		var App = new Vue({
			el: "#app",
			data: {
				list: [{
					icon: '../../../images/home/service/jijin.png',
					title: '公积金',
					desc: '余额查询 | 积金购房',
					Url: 'http://m.jiwu.com/xa/gongjijin/'
				}, {
					icon: '../../../images/home/service/she.png',
					title: '社保',
					desc: '缴费查询 | 养老保险',
					Url: 'https://ask.12333sb.com/'
				}, {
					icon: '../../../images/home/service/wu.png',
					title: '快递查询',
					desc: '单号查询 | 站点查询',
					Url: 'http://m.kuaidi100.com/'
				}, {
					icon: '../../../images/home/service/che.png',
					title: '车主服务',
					desc: '违章查询 | 车险服务',
					Url: 'https://m.weizhang8.cn/'
				}]
			},
			methods: {
				externalclick: function (item) {
					mui.openWindow({
						url: "external.html",
						id: "external",
						extras: {
							data:item
						},
					})
				},
				maintainClick: function () {
					mui.openWindow({
						url: 'maintain.html',
						id: 'maintain',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "有偿维修", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true,
								splitLine: { // 标题栏控件的底部分割线，类似borderBottom
									color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
									height: "1px" // 分割线高度,默认值为"2px"
								}
							}
						},
						waiting: {
							autoShow: false
						}
					})
				}
			}
		})
	</script>
</body>

</html>
